<template>
  <div class="e-wrap">
    <!-- 搜索条件 -->
    <div class="e-filter-options">
      <div class="e-item">
          <span class="title">员工角色</span>
          <div class="o-select dis-block">
              <w-select :options="roleList" v-model="par.roleId"></w-select>
          </div>
      </div>
      <div class="e-item">
          <span class="title">员工部门</span>
          <div class="o-select dis-block">
              <w-select :options='departList' v-model="par.partId"></w-select>
          </div>
      </div>
      <div class="e-item">
          <span class="title">手机号码</span>
          <div class="input dis-block">
              <w-input :holder="`请填写`" v-model="par.safeMobile"></w-input>
          </div>
      </div>
      <!-- 搜索按钮 -->
      <div class="filter-btn">
          <w-button @on-click='onChangePage(1)'>搜索</w-button>
      </div>
    </div>
    <!-- 员工列表 -->
    <div class="e-filter-list">
      <div class="e-add clearfix">
          <w-button @on-click="$router.push(`/employeeMange/add?three=${$route.query.three}`)">新增员工</w-button>
          <span>共计：{{employeeList.totalCount}}条</span>
      </div>
      <!-- 列表数据 -->
      <div class="e-list clearfix" v-if='employeeList.totalCount'>
        <table >
          <tr class="table-h">
              <th>员工姓名</th>
              <th>员工部门</th>
              <th>员工角色</th>
              <th>用户名</th>
              <th>手机号码</th>
              <th>详情</th>
          </tr>
          <tr v-for='(val, index) in employeeList.recordList' :key='index'>
            <td>{{val.trueName}}</td>
            <td>{{val.department.departmentName}}</td>
            <!-- <td v-if="!val.department">{{val.department.departmentName}}</td> -->
            <td>{{val.role.roleName}}</td>
            <td>{{val.userName}}</td>
            <td>{{val.safeMobile}}</td>
            <td>
              <span class="cur" @click="$router.push(`/employeeMange/add?three=${$route.query.three}&id=${val.id}`)">编辑 |</span>
              <span class="cur" @click="delMenuPanel = true; delParams.ids = [val.id]">删除 |</span>
              <span class="cur" @click="$router.push(`/employeeMange/add?three=${$route.query.three}&id=${val.id}&see=true`)">查看</span>
            </td>
          </tr>
        </table>
        <!-- 分页 -->
        <div class="fr" style="margin-top: 55px">
          <w-paging :current="employeeList.currentPage" :total="employeeList.pageCount" @on-page="onChangePage"></w-paging>
        </div>
      </div>
      <div class="e-list" v-else>
        <table>
          <tr class="table-h">
              <th>员工姓名</th>
              <th>员工部门</th>
              <th>员工角色</th>
              <th>用户名</th>
              <th>手机号码</th>
              <th>详情</th>
          </tr>
          <tr>
            <td colspan='6'>没有更多数据了</td>
          </tr>
        </table>
      </div>
      
    </div>

    <!-- 删除员工 -->
    <w-panel-fixed-wrap v-model="delMenuPanel"  :panel-title="true" title="删除员工" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
      <div class="panel-classify">
        是否确认删除员工
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiSystemMange } from 'js/api'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      par: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: 1,
        showCount: 10,
        type: 'employee',
        roleId: '',
        partId: '',
        safeMobile: ''
      },
      employeeList: [], // 员工列表
      delMenuPanel: false,
      // 删除员工 -- 参数
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        ids: []
      }
    }
  },
  created() {
    this.fetchRole({threeMenuCode: this.$route.query.three, token: this.token})
    this.fetchDepartList({threeMenuCode: this.$route.query.three, token: this.token})
    this.getEmployeeList()
  },
  computed: {
    ...mapGetters(['token', 'roleList', 'departList'])
  },
  methods: {
    ...mapActions(['fetchRole', 'fetchDepartList']),
    // 获取员工列表 
    getEmployeeList() {
      this.par.accessToken = this.token
      apiSystemMange.getEmployeeLis(this.par).then(data => {
        if (data.code != '200') return
        this.employeeList = data.data
      })
    },
    // 分页 
    onChangePage(page) {
      this.par.currentPage = page
      this.getEmployeeList()
    },
    // 删除员工
    delOption() {
      this.delParams.accessToken = this.token
      apiSystemMange.delEmploy(this.delParams).then(data => {
        if (data.code != '200') return
        this.$toast('删除成功', () => {
          this.delMenuPanel = false
          this.par.currentPage = 1
          this.getEmployeeList()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';

.e-filter-options {
  border-bottom: 1px solid $border-gray-light;
  .filter-btn {
    margin: 40px auto 20px;
    text-align: center;
  }
  .dis-block {
    vertical-align: middle;
  }
}
.e-filter-list {
  width: 100%;
  .e-add {
    margin: 20px 0;
    span {
      float: right;
      color: rgba(49, 49, 49, 1);
      line-height: 20px;
    }
  }
}
</style>